<template lang="">
  <div>
    <el-button type="danger" @click="delAll">全部删除</el-button>
    <div class="banner">
      <el-carousel indicator-position="outside" style="width: 600px">
        <el-carousel-item v-for="item in imgss" :key="item">
          <el-image :src="item.img" style="width: 600px; height: 400px" />
          <p>{{ item.alt }}</p>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div style="height: 20vh">
      <el-table :data="imgss" style="width: 100%">
        <el-table-column prop="bannerid" label="ID" width="400px" />
        <el-table-column prop="alt" label="提示" width="200px" />

        <el-table-column prop="img" label="图片">
          <template #default="scope">
            <el-image :src="scope.row.img">
              <template #error>
                <div class="image-slot">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-image>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" type="danger" @click="delHandler(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pagesize"
        v-model:current-page="pagenum"
        @current-change="pageNumChange"
      />
    </div>
  </div>
</template>
<script>
import { ElMessage } from 'element-plus'
import { eventBus } from "@/eventBus"

import { bannerListRequest, bannerDelAllRequest, bannerDelRequest } from '@/api/banner'
export default {
  data() {
    return {
      imgss: [],
      pagesize: 3,
      pagenum: 1,
      total: 0,
      allData: [] //服务器一开始返回所有数据
    }
  },
  methods: {
    delAll() {
      bannerDelAllRequest().then((r) => {
        if (r.data.code == 200) {
          ElMessage({
            type: 'success',
            message: r.data.message
          })
          this.bannerList()
        } else {
          ElMessage({
            type: 'error',
            message: r.data.message
          })
        }
      })
    },
    pageNumChange() {
      this.imgss = this.allData.slice(
        (this.pagenum - 1) * this.pagesize,
        this.pagesize * this.pagenum
      )
    },
    bannerList() {
      bannerListRequest().then((r) => {
        this.imgss = r.data.data
        this.allData = r.data.data.reverse()
        this.total = this.allData.length
        this.pageNumChange()
      })
    },
    delHandler(item) {
      bannerDelRequest(item.bannerid).then((r) => {
        if (r.data.code == 200) {
          ElMessage({
            type: 'success',
            message: r.data.message
          })
          this.bannerList()
        } else {
          ElMessage({
            type: 'error',
            message: r.data.message
          })
        }
      })
    }
  },
  mounted() {
    this.bannerList()
  }
}
</script>
<style lang="css" scoped>
.banner {
  width: 600px;
  margin: auto;
  border: 0.5px solid #dedede;
}
</style>
